<template>
    <div class="list">
        <div class="t"> <p>洗护项目</p> <p class="g3">全部服务></p></div>
            <ul>
                <li v-for="(item,index) in typdata" :key="item.type_id" @click="goType(index)">
                   <div class="top">
                        <div class="l"><img :src="item.type_img"/></div>
                        <div class="r">
                            <h3>{{item.type_name}}</h3>
                            <div class="m">
                                <div class="ll">{{item.type_indr}}</div>
                                <div class="rr">岭南店500米</div>
                            </div>
                            <div class="b">
                                <p class="g">免费上门取货</p>
                                <p class="g2">更多分类>></p>
                            </div>
                            <p class="a">已有{{item.type_person_num}}人下单</p>
                        </div>
                   </div>
                    <div class="footer">
                        <div class="left">
                            <p class="p">自营</p>
                            <p>{{item.type_name}}</p></div>
                        <p class="red">{{item.type_price}}起</p>
                    </div>
                </li>   
            </ul>
    </div>
</template>
<script>
export default {
    props:["typdata"],
    methods:{
        goType(index){
                this.$router.push({
                    name:"type",
                    query:{
                        i:index
                    }
                })
        }
    }
}
</script>
<style lang="less" scoped>
.list{
    ul{
        li{
            img{
                 width:200px;
                 margin-left: 30px;
                 margin-top: 20px;
                 
            }
           &:first-child{
               img{
                   width:100%;
                   margin-left: 0px;
                   margin-top: 0;
               }
               
           }
        }
    }
}
.list{
    ul{
        li{
            img{
                 width:200px;
                 margin-left: 30px;
                 margin-top: 20px;
                 
            }
           &:first-child{
               .r{
                   display: none;
               }
               
           }
        }
    }
}
.footer{
    display: flex;
    justify-content: space-between;
     margin-top: 10px;
}
.red{
    color: rgb(239, 0, 0);
}
.footer span{
    font-size: 30px;
}
.list li{
    background-color: #fff;
    margin: 20px 20px 0 20px;
    border-radius:30px 30px ;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    padding: 20px 20px;
}
.p{
    background-color:rgb(239, 0, 0) ;
    color: #fff;
    width: 60px;
    margin-right: 10px;
    border-radius:0 12px ;
   
}
.left{
    display: flex;
    
}
.top{
    display: flex;
    
}
.top .r{
    margin-left: 30px;
}
.m{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.ll{
    color: rgb(63, 161, 157);
    width: 195px;
    font-size: 24px;
}
.rr{
    font-size: 15px;
    margin-left: 70px;
    color: rgb(189, 189, 189);
}
.g{
    border: 4px solid rgb(63, 161, 157);
    color:rgb(63, 161, 157) ;
    display: inline-block;
     font-size: 15px;
     border-radius:12px ;
}
.g2{
    background-color: rgb(63, 161, 157);
    color: #fff;
    display: inline-block;
    font-size: 15px;
    border-radius:12px ;
    margin-left: 110px;
}
.a{
    color:rgb(146, 146, 146) ;
}
.b{
    margin-top:30px ;
}
.t{
    display: flex;
    justify-content: space-between;
    margin: 40px 40px;
}
.g3{
    color:rgb(63, 161, 157) ;
}
.list{
    margin-bottom: 150px;
}
</style>